<template>
    <div class="limited">
        <el-row>
            <el-col :span="6">
                <div class="left-box">
                    <el-tabs v-model="box_index_key" @tab-click="handleClick">
                        <el-tab-pane v-for="(item, index) in box_list_arr" :key="index" :label="item.label"
                            :name="item.name">
                            <el-select v-model="time" placeholder="请选择" @change="selectFun">
                                <el-option v-for="item in time_data" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                            <el-select style="margin-left: 10px" v-model="shopid_yd" placeholder="请选择"
                                @change="selectFun">
                                <el-option v-for="item in getYunShopList" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                            <!-- 列表 -->
                            <LeftList :templates="templates" :listData="listData" @loadFun="loadFun">
                                <div slot-scope="{row}" slot="ctype">
                                    <span>限定人群</span>
                                    <span style="margin-left: 10px">{{ row.ctype == 1 ? "所有客户" : "新客首次购买" }}</span>
                                </div>
                                <div slot-scope="{row}" slot="num_times">
                                    <span>活动场次 {{ row.num_times }}</span>
                                    <span style="margin-left: 10px">参与产品 {{ row.tpl_ls }}</span>
                                </div>
                                <div slot-scope="{row}" slot="num_od" class="num_od">
                                    <span>订单总量 {{ row.num_od }}</span>
                                    <span style="margin-left: 10px">订单金额 {{ row.total_od }}</span>
                                </div>
                                <div slot-scope="{row}" slot="status_txt" class="status_txt">
                                    <span>{{ row.status_txt }}</span>
                                </div>
                                <div slot-scope="{row}" slot="list_btn" class="list_btn">
                                    <el-button @click="activityList(row)" size="mini" type="success">活动记录</el-button>
                                </div>
                            </LeftList>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="iconBox">
                        <i class="el-icon-plus" @click="addActivityList"></i>
                    </div>
                </div>
            </el-col>
            <el-col :span="18">
                <div class="rigth-box">
                    <!-- 新建活动 -->
                    <marketingAdd :getYunShopList="getYunShopList" ref="marketingAdd" @backFun="backFun"></marketingAdd>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import LeftList from "@/components/marketingMenu/leftList.vue";
import marketingAdd from "@/components/marketingMenu/marketingAdd.vue";
import config from "@/js/conf/Config.js";

export default {
    components: {
        LeftList,
        marketingAdd
    },
    data() {
        return {
            box_index_key: "2",
            box_list_arr: [{
                label: "进行中",
                name: "2",
            }, {
                label: "未开始",
                name: "1",
            }, {
                label: "已失效",
                name: "3",
            },],
            templates: [{
                type: "init",
                key: "shop_name",
            }, {
                type: "init",
                key: "title",
            }, {
                type: "slot",
                key: "num_times",
            },
            {
                type: "slot", // Approaching
                key: "ctype",
            },
            {
                type: "init",
                key: "day_txt",
                class: "ps"
            },
            {
                type: "init",
                key: "time_txt",
                class: "ps"
            },
            {
                type: "slot",
                key: "num_od",
            }, {
                type: "slot",
                key: "status_txt",
            }, {
                type: "slot",
                key: "list_btn",
            },],
            listData: [], // 列表数据

            getYunShopList: [{
                name: "全部云店",
                id: 0,
            }],

            time_data: [
                {
                    id: 0,
                    name: "全部日期",
                },
                {
                    id: "1",
                    name: "今日",
                },
                {
                    id: "2",
                    name: "本月",
                },
                {
                    id: "3",
                    name: "本季",
                },
                {
                    id: "4",
                    name: "本年",
                },
                {
                    id: "5",
                    name: "自定义",
                },
            ],
            time: 0, // 时间
            shopid_yd: 0, // 云店
            pfrom: 0,
            count: 100
        }
    },
    created() {
        this.getEventLs();
        this.getYunShopLsFun();
    },
    methods: {
        // 状态切换
        handleClick() {
            this.getEventLs(true);
        },
        // 选择分店
        selectFun(e) {
            this.getEventLs(true)
        },
        loadFun() {
            this.pfrom += 20;
            this.getEventLs(false);
        },
        async getEventLs(type) {
            // type  是否刷新列表
            if (type == true) {
                this.pfrom = 0;
                this.listData = [];
            }
            let url = config.YX_XSMS_EVENT_LS;
            // let url = config.YX_PIN_EVENT_LS;
            let param = {
                shopid_yd: this.shopid_yd,
                st: this.box_index_key,
                pnum: 20,
                pfrom: this.pfrom,
                stime: "",
                time: this.time
            }
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.ls) {
                this.listData.push(...res.data.ls)
            }
        },
        //  获取云店列表
        async getYunShopLsFun() {
            let url = config.YUN_SHOP_LS;
            let param = {};
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.getYunShopList.push(...res.data);
            }
        },
        // 添加活动
        addActivityList() {
            this.$refs.marketingAdd.getYunShopList = this.getYunShopList;
            // this.$refs.marketingAdd.is_next = 'add';
            // this.$refs.marketingAdd.initData();
        },
        // 活动记录
        activityList(row) {

        }
    }
}
</script>

<style lang="scss" scoped>
div {
    box-sizing: border-box;
}

.limited {

    .left-box,
    .rigth-box {
        width: 100%;
        padding: 10px 10px 0 10px;
        height: 100vh;
        position: relative;

        .iconBox {
            position: absolute;
            top: 5px;
            right: 13px;
            font-size: 26px;
            cursor: pointer;
        }

        .marketing-add {
            width: 100%;
        }
    }

    .status_txt {
        position: absolute;
        right: 20px;
        top: 33px;
    }

    .list_btn {
        position: absolute;
        bottom: 10px;
        right: 20px;
        z-index: 9;
    }
}
</style>
<style></style>